<template>
    <div @click.stop v-if="visible" class="float-right-card" :style="{top: top+'px'}">
        <h3 class="title">{{title}}<el-icon @click="handleHide" style="cursor: pointer; position: absolute; right: 5px; top: 5px;" size="14px" color="white"><DArrowRight /></el-icon></h3>

        <el-form style="padding: 0 10px;" v-if="type=='map-set'">
            <el-form-item label="名称">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="宽度">
                <el-input v-model="form.width" type="number" />
            </el-form-item>
            <el-form-item label="高度">
                <el-input v-model="form.height" type="number" />
            </el-form-item>
            <el-form-item label="楼层高度">
                <el-input v-model="mapExtraForm.floorHeight" type="number" />
            </el-form-item>
            <el-form-item label="比例">
                <el-input style="width: 120px;" v-model="mapExtraForm.proportion" type="number" />（px:1m）
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" type="textarea" :rows="2" />
            </el-form-item>
            <el-form-item><div style="width: 100%; text-align: center;"><el-button @click="handleMapInfoChange" type="primary">保存</el-button></div></el-form-item>
        </el-form>

        <div v-if="type=='element-attribute'">
            <el-form style="padding: 0 10px;" v-if="formData">
                <el-form-item label="名称">
                    <el-input v-model="shapeAttribute.title" />
                </el-form-item>
                <el-form-item label="颜色">
                    <div style="display: flex; margin-bottom: 5px;">
                        <el-color-picker style="margin-right: 5px;" v-model="shapeAttribute.color" show-alpha></el-color-picker>
                        <el-input v-model="shapeAttribute.color" disabled />
                    </div>
                    <ul class="clors-box">
                        <li @click="shapeAttribute.color=c" v-for="c in colors" :key="c" :style="{backgroundColor: c}"></li>
                    </ul>
                </el-form-item>
                <el-form-item label="厚度">
                    <el-input-number v-model="shapeAttribute.thickness" :min="1" :max="9999" />
                </el-form-item>
                <el-form-item label="底图">
                    <el-switch v-model="shapeAttribute.isBottom" />
                </el-form-item>
                <el-form-item label="楼梯区域" v-if="formData?.shapeType == 'rect'">
                    <el-switch v-model="shapeAttribute.isStair" />
                </el-form-item>
            </el-form>
            <p style="font-size: 12px;line-height: 50px; color: var(--el-color-info-light-3);" v-else>请选择一个形状</p>
        </div>
        
        <ul class="canvas-layers" v-if="type=='map-layer'">
            <li v-for="item in layers" :key="item.value">
                <span class="cl-name"><el-icon size="14px" style="margin-right: 5px;"> <component :is="item.icon" /></el-icon>{{item.name}}</span>
                <el-icon @click="handleLayersStatusChange(item)" size="14px"><View v-if="item.visible" /><Hide v-else /></el-icon>
            </li>
        </ul>
    </div>
    
</template>

<script setup lang="ts">
import { defineEmits, computed, ref, toRef, watch, onMounted, onUnmounted, reactive } from 'vue';
import { useEventListener } from '@/composable/common';
import * as util from  '@/utils';
import { useStore, mapState } from 'vuex';
import { updateMap } from '@/api/map';

interface Props {
    visible: boolean;
    type?: string|null;
    formData?: any;
}
const store = useStore();
const storeName = "mapDesign";

const props = withDefaults(defineProps<Props>(),{
	
})
const form = ref({
    name: '',
    width: 0,
    height: 0,
    description: ''
})

const mapExtraForm = ref({
    proportion: 50,
    floorHeight: 200
})
const shapeAttribute = ref({
    title: '',
    color: '',
    thickness: 50,
    isBottom: false,
    isStair: false
})

const title = computed(()=>{
    if(props.type == 'map-set'){
        return '地图设置'
    }else if(props.type == 'element-attribute'){
        return '形状设置'
    }else{
        return '图层'
    }
})

const top = computed(()=>{
    if(props.type == 'map-set'){
        return 12
    }else if(props.type == 'element-attribute'){
        return 60
    }else{
        return 105
    }
})

const colors = ref([
    'rgba(236, 204, 104)',
    'rgba(255, 127, 80)',
    'rgba(255, 107, 129)',
    'rgba(164, 176, 190)',
    'rgba(87, 96, 111)',

    'rgba(255, 165, 2)',
    'rgba(255, 99, 72)',
    'rgba(255, 71, 87)',
    'rgba(116, 125, 140)',
    'rgba(47, 53, 66)',

    'rgba(123, 237, 159)',
    'rgba(112, 161, 255)',
    'rgba(83, 82, 237)',
    'rgba(255, 255, 255)',
    'rgba(223, 228, 234)',

    'rgba(46, 213, 115)',
    'rgba(30, 144, 255)',
    'rgba(55, 66, 250)',
    'rgba(241, 242, 246)',
    'rgba(206, 214, 224)'
    
])

colors.value = colors.value.map(c=>{
    return c.replace(/\)$/,', 0.8)')
})

const layers = computed(()=>store.state[storeName].layers);

// watch(layers,(val)=>{
//     console.log(val,'变化')
// },{ deep: true })


const emit = defineEmits<{
    'change': [value: any, type: string],
    'close',
    'sizeChange': [value: any],
    'layer-status-change': [value: any]
}>()

function handleHide(){
    emit('close');
}

onMounted(()=>{
    const mapData = store.state[storeName].mapData
    for(let key in form.value){
        form.value[key] = mapData[key];
    }
    mapExtraForm.value = mapData.extra?JSON.parse(mapData.extra):{};

})


function handleLayersStatusChange(item){
    store.dispatch(storeName+'/setLayerStatus',item.value);
    emit('layer-status-change',item);
}

function handleMapInfoChange(){
    const data = {...form.value};
    data.width = parseFloat(data.width || 0);
    data.height = parseFloat(data.height || 0);
    data.extra = JSON.stringify(mapExtraForm.value||{});
    updateMap(store.state[storeName].mapId,data).then(res=>{
        //更新必要的svg数据
        emit('sizeChange',data)
    })
}

function handleFormDataUpdate(){
    const data = props.formData;
    if(data){
        if(props.type == 'element-attribute'){
            for(let key in shapeAttribute.value){
                shapeAttribute.value[key] = data[key];
            }
        }
    }
}

watch([form, shapeAttribute],()=>{
    console.log('shapeAttribute----变化---')
    if(props.type == 'element-attribute'){
        emit('change',shapeAttribute.value, props.type);
    }
   
},{ deep: true })

watch(()=>props.formData,handleFormDataUpdate);

watch(()=>props.visible,(val)=>{
    if(val){
        //数据注入
        handleFormDataUpdate();
    }
});


</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.float-right-card{
    position: absolute;
    top: 0;
    right: 40px;
    width: 300px;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
   
    .title{
        background-color: var(--el-color-primary-light-3);
        color: white;
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 10px;
        position: relative;
        padding-left: 10px;
    }
    .clors-box{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 28px;
            height: 28px;
            cursor: pointer;
            transition: all .1s;
            &:hover{
                transform: scale(1.1);
            }
        }
    }
    .canvas-layers{
        width: 100%;
        li{
            display: flex;
            font-size: 12px;
            line-height: 30px;
            border-bottom: 1px solid var(--el-border-color);
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            .cl-name{
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>